<template>
	<div class="lucky">
		<ul class="pl30rem pr30rem" v-if="flag"> 
			<li class="flex-left border-b pt30rem pb30rem" v-for="item in data">
				<img v-if='item.user_headimg' class="circle mr30rem" :src=" img_url + item.user_headimg" alt="">
				<img v-else src="../../../assets/member/avatar.png" class="circle mr20" alt="头像">
				<div class="img-text">
					<div class="flex-left">
						<p class="28rem c333 bold mb15rem lucky-name primary">{{ item.user_name }}</p>
						<img class="ml20rem" src="../../../assets/icon8.png" alt="" v-if="item.level == 1 ">
						<img class="ml20rem" src="../../../assets/icon8.png" alt="" v-if="item.level == 2 ">
						<img class="ml20rem" src="../../../assets/icon8.png" alt="" v-if="item.level == 3 ">
					</div>
					<p class="">
						<span class="fs24rem c666">{{ item.province }}·{{ item.city }}</span>
						<span class="fs24rem c666">{{ item.tel }}</span>
					</p>
				</div>
			</li>
		</ul>
		<template v-else>
			<default :imgUrl="img" explain='暂无幸运名单'></default>
		</template>	
	</div>
</template>

<script>
	import { getLuckyList } from '@/api/goods-detail';
	import Default from "@/components/Default";
	export default{
		components: {
			Default
		},
		data()
		{
			return{
				data    : [],
				flag    : true,
				sku_id  : this.$route.query.sku_id,
				img_url : process.env.IMG_URL,
				img     : require('../../../assets/icon-goods2.png')
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				getLuckyList(this.sku_id).then( res=> {
					this.data = res.data;
					if(this.data.length>0)
						this.flag = true;
					else
						this.flag = false;
				})
			}
		}
	}
</script>

<style lang="less">
	.lucky{
		ul{
			li{
				img{
					width: 80/28rem;
					height: 80/28rem;
					object-fit: cover;

				}
				.lucky-name{
					background-size: 137/28rem 45/28rem;
					background-repeat: no-repeat;
					background-position: 100% center;
				}
				.img-text{
					img{
						width:124/28rem;
						height: 33/28rem;
						object-fit: cover;
					}
				}
				// .primary{
				// 	background-image: url(../../../assets/icon8.png);
				// }
				// .intermediate{
				// 	background-image: url(../../../assets/icon9.png);
				// }
				// .advanced{
				// 	background-image: url(../../../assets/icon10.png);
				// }
			}
		}
	}
</style>